<extend name="Public/base" />
<block name="content">
    <div style="margin-top:2%;padding-left:35%" id="buttonGroup">
        <button onclick="add()" class="button tiny addRoless">添加菜单</button>&nbsp;&nbsp;&nbsp;
        <button onclick="unSelect()" class="button tiny">反选</button>&nbsp;&nbsp;&nbsp;
        <button onclick="delLot()" class="button tiny">删除(批量)</button>
    </div>
    <table id="roleTbl" style="margin-left: 10%">
        <thead >
            <th><input  onclick="selectAll(this)" type="checkbox"></th>
            <th style="text-align: center;width:4rem">编号</th>
            <th style="text-align: center;width:12rem">角色名称</th>
            <th style="text-align: center;width:12rem">角色权限</th>
            <th style="text-align: center;width:8rem"> 操作</th>
        </thead>

        <tbody id="tbodys">
        <volist name="navs" id="nav">
            <tr id="row_<{$nav.role_id}>">
                <td><input class="slct" type="checkbox" value="<{$nav.role_id}>"></td>
                <td><{$nav.role_id}></td>
                <td><input name="role_name" style="height:25px" class="es" disabled type="text" value="<{$nav.role_name}>"></td>
                <td style="text-align: center"><button onclick="lookMenu('<{$nav.role_id}>')" class="button tiny edit radius">查看</button></td>
                <td style="text-align: center">
                    <button onclick="edit('row_<{$nav.role_id}>')" class="button tiny edit radius" style="height:25px;line-height:6px">编辑</button>
                    <button onclick="save('<{$nav.role_id}>')" style="display: none;height:25px;line-height:6px" class="button tiny save radius">保存</button>
                </td>
            </tr>
        </volist>
        </tbody>
    </table>
    <table style="display:none;margin-left: 30%;margin-top: 10%" id="selectMenu">
        <tr>
            <th>未拥有权限</th>
            <th>已拥有权限</th>
        </tr>
        <tr>
            <td id="addHide">
                <select id='sell' multiple style="width:100px ;height:300px">
                    <volist name="menuse" id="v">
                        <option value="<{$v.mname}>" onclick="selectRight('<{$v.menu_id}>')" id="rowm_<{$v.menu_id}>"><{$v.mname}></option>
                    </volist>
                </select>
            </td>
            <td>
                <select id="seller" multiple style="width:100px ;height:300px">
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align: center">
                <button class="button tiny radius" onclick="editSelect()">修改</button>
                <button  class="button tiny danger radius" onclick="closeSelect()">关闭</button>
            </td>
        </tr>
    </table>
    <script>
        //全选
        function selectAll(obj) {
            $('#roleTbl tbody .slct').prop('checked',$(obj).prop('checked'));
        }
        //反选
        function unSelect() {
            $('#roleTbl tbody .slct').map(function(){
                $(this).prop('checked',!$(this).prop('checked'));
            });
        }

        //批量删除
        function delLot() {
           if($('#roleTbl tbody .slct:checked')['length']){
            if(confirm('确定删除吗?')){
            var ids = $('#roleTbl tbody .slct:checked').map(function () {
                $(this).parent().parent().remove();
                return $(this).val();
            });
            ids  = ids.get().join();
            $.post('<{:U("doDelRole")}>',{ids:ids},function (data) {
                alert(data.msg);
            });
        }}}
        //修改
        function edit(rowid) {
            $('#'+rowid+' .es').prop('disabled',false);
            $('#'+rowid+' .edit').hide();
            $('#'+rowid+' .save').show();
        }
        //修改保存
        function save(id) {
            $('#row_'+id+' .es').prop('disabled',true);
            $('#row_'+id+' .edit').show();
            $('#row_'+id+' .save').hide();

            var data = {
                role_id:id,
                role_name:$('#row_'+id+' [name=role_name]').val(),
            }

            $.post('<{:U("doEditRole")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);
                }
            });

        }
        //添加
        function add(){
            newRows="<tr id='addsss'>"
                            +"<td></td>"
                            +"<td></td>"
                            +"<td><input class='nameAdd' style='height:25px' class='es' type='text'></td>"
                            +'<td></td>'
                            +"<td>"
                            +"<button onclick='addRoles()' class='button tiny edit radius' style='height:25px;line-height:6px'>添加</button><br />"
                            +"<button onclick='canelAddRoles()' class='button tiny edit radius' style='height:25px;line-height:6px'>取消</button>"
                            +"</td>"
                            +"</tr>"
            ;
            $("#roleTbl").append(newRows);
            $('.addRoless').hide();
        }
        function canelAddRoles(){
            $('#addsss').remove();
            $('.addRoless').show();
        }
        function addRoles(){
            var data = {
                role_name:$('.nameAdd').val(),
            }
            $.post('<{:U("doAddRole")}>',data,function (data) {
                if(data.error!==0){
                    alert(data.msg);

                }
            });
            $('#addsss').remove();
            $('.addRoless').show();
        }
        //权限
        function lookMenu(a){
            $('#buttonGroup').hide();
            $('#roleTbl').hide();
            $('#selectMenu').show();
            $.get('<{:U("getRole")}>',{id:a},function(data){
                var html='';
                if(data!=''){
                    for (i  in data) {
                            html += '<option  onclick="selectLeft('+data[i]+')" id="rown_'+data[i]+'" value="'+data[i]+'">'
                                    + $('#rowm_'+data[i]).val()
                                    +'</option>'
                            $('#rowm_'+data[i]).hide();
                        }
                        $('#seller').html(html);
                }
                var hide='<input type="hidden" id="hidd" value="'+a+'">'
                $('#addHide').append(hide);
            });
        }
        function selectRight(a){
            var rightHtml='<option  onclick="selectLeft('+a+')" id="rown_'+a+'" value="'+a+'">'+$('#rowm_'+a).val()+'</option>'
            $('#rowm_'+a).hide();
            $('#seller').append(rightHtml);
        }
        function selectLeft(a){
            //var leftHtml='<option id="rown_'+a+'" onclick="selectRight('+a+')" value="'+$('#rowm_'+a).html()+'">'+$('#rowm_'+a).html()+'</option>';
            $('#rown_'+a).remove();
            $('#rowm_'+a).show();
            //$('#sell').append(leftHtml);
        }
        function closeSelect() {
            $('#buttonGroup').show();
            $('#roleTbl').show();
            $('#selectMenu').hide();
            $('#hidd').remove();
            $('#sell option').show();
            $('#seller option').remove();
        }
        function editSelect() {
            var a=$('#hidd').val();
            var b=$('#seller option').map(function(){return $(this).val();}).get().join(",");
            $.post('<{:U("Role/doEditRole")}>',{role_id:a,menu_ids:b},function(data){
                alert(data.msg);
                $('#buttonGroup').show();
                $('#roleTbl').show();
                $('#selectMenu').hide();
                $('#hidd').remove();
                $('#sell option').show();
                $('#seller option').remove();
            })
        }
    </script>
</block>